<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=640,user-scalable=no,target-densityDpi=device-dpi">
		<title>贺卡</title>
		<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
		<script type="text/javascript" src="js/swiper.animate.min.js"></script>
		<script type="text/javascript" src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/maskUtil.js"></script>
		<script type="text/javascript" src="js/cropper.min.js"></script>
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript" src="js/commonAjax.js"></script>
		<link rel="stylesheet" href="css/animate.min.css" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/my.css" />
		<link rel="stylesheet" href="css/jquery.Jcrop.min.css">
		<link rel="stylesheet" href="css/swiper.min.css" />
		<link rel="stylesheet" href="css/cropper.min.css" />
		<script type="text/javascript" src="home/index.js"></script>
		<script>
			$(function() {
				index.init(4);
				showMusic();
				var $main = $('#main');
				var $list = $('#list');
				var $li = $list.find('>li');
				var desW = 640;
				var desH = 960;
				var viewHeight = $(window).height();
				$main.css('height', viewHeight);
				slideCanvas();

				function nowWidth() {
					var w = desW / desH * viewHeight;
					return w;
				}

				function showMusic() {
					var $music = $('#music');
					var $audio1 = $('#audio1');
					var onoff = true;
					$music.on('touchstart', function() {
						if (onoff) {
							$(this).attr('class', 'active');
							$audio1.get(0).play();
						} else {
							$(this).attr('class', '');
							$audio1.get(0).pause();
						}
						onoff = !onoff;
					});
					$music.trigger('touchstart');
				}

				function slideCanvas() {
					showimg();
				}

				function showimg() {
					$("#model").css('background-image', 'url(img/bg4.gif)');
					$("#img1").show();
					$("#img2").show();
					$("#message").show();
				}
			});
		</script>
		<style>
			#word1{
				margin-top: -700px;
			}
			#img1 {
				width: 130px;
				height: 180px;
				margin-left: 115px;
				margin-top: 600px;
				border-radius: 75px /100px;
			}
			#img2 {
				width: 100px;
				height: 150px;
				margin-left: 260px;
				margin-top: 580px;
				border-radius: 75px /100px;
			}
			.oval-thought {
				position: relative;
				width: 250px;
				padding: 10px 20px;
				margin: 1em auto 100px;
				text-align: center;
				color: #fff;
				background: white;
				/* css3 */
				background: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(white));
				background: -o-linear-gradient(white, white);
				background: linear-gradient(white, white);
				-webkit-border-top-left-radius: 320px 280px;
				-webkit-border-top-right-radius: 320px 280px;
				-webkit-border-bottom-right-radius: 320px 280px;
				-webkit-border-bottom-left-radius: 320px 280px;
				-moz-border-radius: 320px / 280px;
				border-radius: 320px / 280px;
			}
			
			.oval-thought p {
				color: #000000;
				font-size: 1em;
			}
			/* creates the larger circle */
			
			#message {
				margin-left: 210px;
				margin-top: -200px;
			}
			
			.oval-thought:before {
				content: "";
				position: absolute;
				bottom: -20px;
				left: 50px;
				width: 30px;
				height: 30px;
				background: white;
				/* css3 */
				-webkit-border-radius: 30px;
				-moz-border-radius: 30px;
				border-radius: 30px;
			}
			.oval-thought:after {
				content: "";
				position: absolute;
				bottom: -30px;
				left: 30px;
				width: 15px;
				height: 15px;
				background: white;
				/* css3 */
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
			}	
			/* creates the smaller circle */
			#share {
				width: 120px;
				height: 50px;
				background-size: cover;
				position: absolute;
				bottom: 200px;
				left: 190px;
				z-index: 8;
			}
			#zhizuo {
				width: 120px;
				height: 50px;
				position: absolute;
				bottom: 200px;
				left: 330px;
				z-index: 8;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<ul id="list">
				<li id="model">
					<ul class="li1Child">
						<img id="share" src="img/fenxiang4.gif"/>
						<img id="zhizuo" src="img/zhizuo4.gif"/>
						<img class="swing" style="display: none;" id="img1" src="img/man.png" />
						<img id="guanzhu" src="img/guanzhu4.gif" />
						</ul>
					<ul class="li1Child" style="z-index: 20;">
						<blockquote class="oval-thought" id="message" style="display: none;margin-top:-250px;margin-left: 250px;">
							<p id="i_message">新的一年，做个冻龄美少年，让爱情持久保鲜</p>
						</blockquote>
					</ul>
					<ul class="li1Child" style="z-index: 40;">
						<img id="word1" src="img/word4.gif" />
					</ul>
				</li>
			</ul>
			<div id="music">
				<audio id="audio1" src="img/music.mp3" preload="auto" loop></audio>
			</div>
			<div id="qrcode" style="display: none"><img src="img/qrcode.gif"/></div>	
			<div id="qrcodeShare" style="display: none"><img src="img/share.gif"/></div>
		</div>
		<div class="modal fade" id="messageModal" labelledby="mySmallModalLabel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document" style="width:400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">修改文字</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="recipient-name" class="control-label">文字:</label>
								<input type="text" id="u_message" placeholder="不超过三十字" class="form-control" maxlength="30" id="recipient-name">
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" id="cancelWord" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="saveWord" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>
		<div class="modal fade col-md-8" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document" style="width:400px;">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">修改图片</h4>
					</div>
					<div class="modal-body">
						<div class="col-md-12" style="margin-bottom: 10px;">
							<div class="form-group">
								<div class="col-md-7" style="text-align: center;">
									<input id="btn_chooseImg" type="button" class="btn btn-primary" value="上传头像" style="padding-top: 15px;">
									<div class="row text-center" style="padding-top: 20px;">
										<img id="preview" class="margin_20 img-responsive" style="width: 400px" src="img/default.jpg" alt="">
										<p style="color: #bbb; margin-top: 5px;">仅支持jpg,png,bmp格式,小于4M的照片</p>
										<input type="file" id="input_File" style="display: none;" onchange="index.fileSelectHandler()">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" id="cancel" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" id="save" class="btn btn-primary">保存</button>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>